<template>
  <div>
    <el-container style="height: 700px; border: 1px solid #eee">
      <Left></Left>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"> <span>{{user.nickname}}</span></i>
            <el-dropdown-menu slot="dropdown">
              <a href="#" @click="logout"><el-dropdown-item>退出</el-dropdown-item></a>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main>
          <el-button
              fixed="left"
              type="primary"
              @click="add">
           新增
          </el-button>
          <el-table
              :data="tableData"
              border
              style="width: 100%">
            <el-table-column
                prop="name"
                label="名称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="pic"
                label="海报"
                width="120">
              <template width="90" slot-scope="scope">

                <img style="width:40px;height:40px;border:none;" :src="scope.row.pic">

              </template>
            </el-table-column>
            <el-table-column
                prop="introduction"
                label="介绍"
                width="300">
            </el-table-column>
            <el-table-column
                prop="duration"
                label="时长"
                width="120">
            </el-table-column>
            <el-table-column
                prop="director"
                label="导演"
                width="120">
            </el-table-column>
            <el-table-column
                prop="actor"
                label="演员"
                width="200">
            </el-table-column>
            <el-table-column
                label="操作"
                width="200">
              <template slot-scope="scope">
                <el-button @click="editRow(scope.row.id)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteRow(scope.row.id)" type="text" size="small" >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination class="mpage"
                         background
                         layout="prev, pager, next"
                         :current-page="currentPage"
                         :page-size="pageSize"
                         :total="total"
                         @current-change=getFilms>
          </el-pagination>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import Left from "../../components/Left";
export default {
  name: "Films.vue",
  components: {Left},
  data() {
    return {
      user: this.$store.getters.getUser,
      tableData:[],
      currentPage: 1,
      total: 0,
      pageSize: 5,
      classification:'',
      year:'',
    }
  },
  methods:{
    add(){
      this.$router.push("/addFilm")
    },
    handleClick(row) {
      console.log(row);
    },
    deleteRow(id){
      const _this = this
      _this.$axios.post("/film/delete/"+id).then(res => {
        if(res.data.data === true){
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'success'
          });
          //重新刷新列表
          this.getFilms(this.currentPage);
        }else{
          this.$message.error("网络异常，删除失败！");
        }
      })
    },
    editRow(id){
      this.$router.push("/editFilm/"+id)
    },
    getFilms(currentPage){
      const _this = this
      _this.$axios.get("/film/page?currentPage="+currentPage+"&classId="+this.classification+"&yearId="+this.year).then(res => {
        _this.tableData = res.data.data.records
        _this.currentPage = res.data.data.current
        _this.total = res.data.data.total
        _this.pageSize = res.data.data.size
      })
    },
    logout() {
      debugger;
      const _this = this
      _this.$store.commit("REMOVE_INFO")
      _this.$router.push("/adminLogin")
    },
  },
  created() {
    this.getFilms(this.currentPage,'','')
  }
};
</script>
<style>
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}


.mpage {
  margin: 0 auto;
  text-align: center;
}
</style>